<template>
    <div class="AdPutIn">
        <div class="title_bt">
            <div class="bt on" @click="add"><i class="el-icon-caret-bottom"></i>新建广告投放</div>
            <div class="bt" :class="multipleSelection.length!=0?'':'hui' " @click="statelist('停用')">停用</div>
            <div class="bt" :class="multipleSelection.length!=0?'':'hui' " @click="statelist('启用')">启用</div>
              <div class="bt" :class="multipleSelection.length!=0?'':'hui' " @click="statelist('删除')">删除</div>
           <div class="bt" @click="search_show=!search_show">筛选 <i :class="search_show?'el-icon-caret-top':'el-icon-caret-bottom' "></i> </div>
             <div class="search">
                <el-input v-model="userForm.name" placeholder="请输入投放名称" @change="search()"></el-input>
                <div class="button" @click="search()"><i class="el-icon-search"></i></div>
             </div>
        </div>
          <div class="search_show" v-show="search_show">
            <el-row :gutter="20">
                <el-col :xs="12" :sm="6" :lg="5" :xl="3" class="card">
                    <div class="bt">状态：</div>
                    <div class="cardflex1">
                        <el-select v-model="userForm.status" placeholder="请选择状态">
                            <el-option
                                v-for="item in select_state" 
                                @click.native="filterselect()"
                                :key="item.value"  
                                :label="item.value" 
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="6" :lg="5" :xl="3" class="card">
                    <div class="bt">代码位：</div>
                    <div class="cardflex1">
                        <el-select v-model="userForm.adsense_id" filterable placeholder="请选择代码位">
                            <el-option
                                v-for="item in select_codebits" 
                                @click.native="filterselect()"
                                :key="item.name"  
                                :label="item.name" 
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="6" :lg="5" :xl="3" class="card">
                    <div class="bt">物料：</div>
                    <div class="cardflex1">
                        <el-select v-model="userForm.matter_id" filterable placeholder="请选择物料">
                            <el-option
                                v-for="item in select_material" 
                                @click.native="filterselect()"
                                :key="item.name"  
                                :label="item.name" 
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                  <el-col :xs="12" :sm="6" :lg="5" :xl="4" class="card">
                    <!-- <el-button type="primary" @click="search">确定</el-button> -->
                    <el-button type="danger" @click="reset">重置</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table :data="tableData" 
            v-loading="loading"
            style="width: 100%" class="tablebox"  @selection-change="handleSelectionChange">
            <el-table-column
            type="selection"
            width="43">
            </el-table-column>
            <el-table-column prop="id"   label="编号" width="80" sortable  align="center"></el-table-column>
            <el-table-column prop="name" align="center"  label="名称"></el-table-column>
            <el-table-column prop="status" label="状态" align="center" width="100"  >
                <template slot-scope="{ row }">
                        <el-tag size='mini'
                         :type="row.status==0? 'danger' : row.status==1? '' : row.status==2?  'success'  :   row.status==3 ? 'warning' : 'info'">
                          {{row.status==0?'删除':  row.status==1 ?  '投放中'  : row.status==2 ?  '投放完成' :  row.status==3 ?  '待投放' : '暂停'}}
                        </el-tag>
                </template>
            </el-table-column>
            <el-table-column  label="代码位" prop="code_name" align="center"    ></el-table-column>
            <el-table-column  label="物料" prop="wuliao" align="center"    ></el-table-column>
            <el-table-column  label="权限" prop="quanxian" align="center"  width="100" ></el-table-column>
            <el-table-column prop="starttime" align="center" sortable label="投放时间"  width="120"  >
                  <template slot-scope="{ row }">
                   <p>{{row.starttime}}</p>
                   <p style="color:#909399; font-size:12px;">截至</p>
                   <p v-text="row.endtime !=''? row.endtime :'不限'"></p>
                </template>
            </el-table-column>
            <el-table-column prop="time_launch" align="center"   label="投放时间进度" width="130"  >
                <template slot-scope="{ row }">
                    <el-progress     :stroke-width="5" :percentage="progress(row.time_launch) " :color="customColors"></el-progress>
                </template>
            </el-table-column>
            <el-table-column prop="time_delivery" align="center"   label="投放量进度"  width="130" >
                <template slot-scope="{ row }">
                    <el-progress   :stroke-width="5" :percentage="progress(row.time_delivery)" :color="customColors"></el-progress>
                </template>
            </el-table-column>
            <el-table-column class-name="status-col"  label="操作" width="210"  align="center"  fixed="right">
                <template slot-scope="{ row }">
                    <kt-button icon="el-icon-edit"   size='mini'  label="修改" perms="sys:adminlist:edit" type="primary" @click="handleUpdate(row.id,)"/>
                    <kt-button icon="el-icon-message"  size='mini' label="报告" perms="sys:adminlist:delete" type="success" @click="handleReport(row.id)"/>
                    <kt-button icon="el-icon-delete"  size='mini' label="删除" perms="sys:adminlist:delete" type="danger" @click="handleDelete(row.id)"/>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="pageswarp"
            :background="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=userForm.page
            :page-size=page_size
            layout="total, prev, pager, next, jumper"
            :total=total>
        </el-pagination>
         <drawer-ad :drawer='ad_drawer' :id="drawer_id" :title="drawer_title" @handleClose='handleClose' @adputinUpdate="adputinUpdate"/>    <!--获取广告位得代码  -->
         <report type_data="report_advertising" title="广告投放报告" :drawer='drawer_report' :itemad="report_id" @handleClose_report='handleClose_report'/>    <!--我的报告  -->
    </div>
</template>
<script>
import KtButton from "@/components/elbutton"
import drawerAd from "@/components/el_drawer/ad_from.vue"
import report from "@/components/el_drawer/report.vue"
import { axios_adver_index ,axios_adversense,axios_adver_open } from "@/api/infor";

export default {
    name:'AdPutIn',
    data(){
        return{
            customColors: [
                {color: '#f56c6c', percentage: 30},
                {color: '#e6a23c', percentage: 70},
                {color: '#67c23a', percentage: 100}
            ],
            loading:true,
            page_size:1,
            total:1,
            search_show:true,  //显示搜索盒子
            userForm:{
                page:1,
                status:'-1',     //搜索下拉框状态
                adsense_id:'0',//搜索下拉框代码位
                matter_id:'0',  //搜索下拉框物料
                name:''   //顶部的搜索栏目 
            },
            ad_drawer:false, //代码广告位
            drawer_title:'新建',//新建修改广告位title
            drawer_id:'',  //新建修改广告位数据
            drawer_report:false,   //报告
            report_id:'',//报告id
            select_state:[
               {value:"全部",id:'-1'},
               {value:"删除",id:'0'},
               {value:"投放中",id:'1'},
               {value:"投放完成",id:'2'},
               {value:"待投放",id:'3'},
               {value:"暂停",id:'4'}
           ],
           select_codebits:[{name:"全部",id:'0'}],
           select_material:[{name:"全部",id:'0'}],
            tableData: [],//表格的数据
          multipleSelection: []
        }
    },
    created(){
         this.axiosAdversense()
         console.log(this.$route.query.adsense_id)
      
    },
      watch:{
        $route:{
            handler(nv){
                if(nv.name=='ADputin'){
                    if(this.$route.query.adsense_id){
                        this.userForm.adsense_id=this.$route.query.adsense_id;
                            this.loading=true;
                            let page_={
                                page:1,
                                status:['1','3'],     
                                adsense_id: this.userForm.adsense_id,   
                                matter_id: this.userForm.matter_id,  
                                name:this.userForm.name,  
                            }
                            axios_adver_index(page_).then((res) => {
                                if(res.data.code==1){
                                    this.loading=false;
                                    this.tableData=res.data.data;
                                    this.page_size=res.data.page_size;
                                    this.total=Number(res.data.total);
                                }
                            }).catch(( )=>{})

                    }else{
                         this.userForm={
                            page:1,
                            status:'-1',     //搜索下拉框状态
                            adsense_id:'0',//搜索下拉框代码位
                            matter_id:'0',  //搜索下拉框物料
                            name:''   //顶部的搜索栏目 
                        }
                        this.getdatalist("refresh")
                    }
                  
                }
            },
            immediate:true
        },
        multipleSelection(ov){
            console.log(ov)
        }
        
    },
     components:{
        KtButton,
        drawerAd,
         report
    },
    methods:{
        // 搜索栏
        search(){
            this.getdatalist("refresh")
        },
        // 下拉框选项搜索
        filterselect(){
             this.getdatalist("refresh")
        },
        // 重置
        reset(){
            this.search_show=true;
             this.getdatalist("reset")
        },
         handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.userForm.page=val;
             this.getdatalist()
        },
       
         // 删除广告位
        handleDelete(id){
             this.$confirm('确定要删除此条数据吗？','确认信息',{customClass:'layeralterelbox'}) .then(()  => {
                this.filterdata({ids:[id],status:0,type:1},'删除')
            }).catch(()  => {});
        },
        handleReport(id){
            this.report_id=String(id);
             this.drawer_report=true;
        },
        // 获取代码位代码
        handlecode(item,index){
            console.log(item,index);
            this.code_drawer=true;
        },
        //关闭广告位代码
         handleClose(){
             this.ad_drawer=false;
         },
         adputinUpdate(boolean){
            if(boolean){
               this.getdatalist() //修改后更新列表
            }
         },
           //  关闭报告
        handleClose_report(){
             this.drawer_report=false;
         },
        beforehandleCommand(row,child){
            return {'row':row,'child':child}
        },
         handleCommand(command) {
            if(command.child==1){   //操作所在网址
               console.log(command.row)
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        add(){
            // this.drawer_title='新建网站'; 
            this.drawer_title='新建';
            this.drawer_id='' 
            this.ad_drawer=true; 
        },
          // 修改用户
          handleUpdate(id){
             this.drawer_title='修改'; 
              this.drawer_id=id;
             this.ad_drawer=true; 
        },
        removeDuplicates(arr1, arr2) {
          const uniqueElements = new Set([...arr1, ...arr2]);
        return Array.from(uniqueElements);
        },
        statelist(val){
            let  state=''
          switch (val) {
                case "删除":
                    state =0;
                    break;
                case "启用":
                    state = 1;
                    break;
                case "停用":
                    state = 4;
                    break;
            }
            if(this.multipleSelection.length<1){
                this.$message('请勾选的广告位');
            }else{
                this.$confirm('确定要'+val+'勾选的广告位吗？','确认'+val+'',{customClass:'layeralterelbox'}) .then(()  => {
                     let arrid=[];
                   this.multipleSelection.forEach(row => {
                       let id=row.id
                        arrid.push(id)
                   });
                    this.filterdata({ids:arrid,status:state,type:1},val)
                }).catch(()  => {});
            } 
        },
        //操作列表选项
         filterdata(page,val){
            axios_adver_open(page).then((res) => {
                if(res.data.code==1){
                    this.$message({message:val+'已经操作成功', type: 'success'});
                    this.getdatalist()
                    this.multipleSelection = [];   // 清空选中项
                }
            }).catch((e )=>{
                this.$message({message:e, type: 'warning'});
            })
        },
        // 获取列表数据
        getdatalist(type){
            if(type=="refresh"){
                this.userForm.page=1;
            }
            if(type=="reset"){
                this.userForm={
                    page:1,
                    status:'-1',     
                    adsense_id:'',   
                    matter_id:'',  
                    name:''
                }
            }
            this.loading=true;
            axios_adver_index(this.userForm).then((res) => {
                if(res.data.code==1){
                    this.loading=false;
                    this.tableData=res.data.data;
                    this.page_size=res.data.page_size;
                    this.total=Number(res.data.total);
                }
            }).catch(( )=>{})
        },
        // 获取代码位的分类
        axiosAdversense(){
           axios_adversense({model:2,flow_type:'0'}).then((res) => {
                 this.select_codebits.push(res.data.data);
                 this.select_codebits=this.select_codebits.flat(Infinity)
                
            }).catch(( )=>{})
            axios_adversense({model:3,flow_type:'0'}).then((res) => {
                  this.select_material.push(res.data.data);
                 this.select_material=this.select_material.flat(Infinity)
            }).catch(( )=>{})
           
        },
        // 获取物料的分类
        progress(val){
           return Number(val.split("%").join(""));
        }
    }
}
</script>
<style>
.el-table .cell .el-button{padding: 10px 5px;}
.el-table .cell .el-button + .el-button{
  margin-left: 0px;
}
</style>